<template>
  <n-button class="is-mini" @click="active = true">目录</n-button>
  <n-drawer class="is-mini" v-model:show="active" width="50vw" placement="left">
    <n-drawer-content title="目录">
      <n-menu @update:value="handleUpdateValue" v-model:value="menu" :options="menuOptions" />
    </n-drawer-content>
  </n-drawer>
  <n-menu class="no-mini" @update:value="handleUpdateValue" v-model:value="menu" mode="horizontal"
    :options="menuOptions" />
</template>

<script setup lang="ts">
import {
  NIcon,
  NMenu,
  type MenuOption,
  NButton,
  NDrawer,
  NDrawerContent,
} from "naive-ui";
import { findAllPages as apiPageFindAll } from "../../api/page";
import pageInfoStore from "~/stores/pageInfo"
const route = useRoute();
const menu = ref("");
const pageInfo = pageInfoStore();
watchEffect(() => {
  menu.value = String(route.name);
});

const handleUpdateValue = (value: string, item: MenuOption) => {
  navigateTo(`/${value.replaceAll("-", "/")}`);
};
const menuOptions = ref<MenuOption[]>([
  {
    label: "首页",
    key: "home",
  },
  {
    label: "文章",
    key: "search",
  },
  {
    label: "作品",
    key: "work",
  },
  {
    label: "归档",
    key: "archive",
  },
]);
const getPostList = async () => {
  const res = await apiPageFindAll();
  if (res?.data) {
    res.data.forEach((item) => {
      menuOptions.value.push({
        label: item.name,
        key: "page-" + item.path,
      });
    });
  }
};
const active = ref(false);
const activate = () => {
  active.value = true;
};
getPostList();

</script>
<style scoped lang="scss">
.n-menu {
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .is-mini {
    display: none;
  }
}

@media (max-width: 768px) {
  .no-mini {
    display: none;
  }
}
</style>
